<template>
  <el-date-picker
    :clearable="false"
    :picker-options="pickerOptions"
    align="right"
    class="el-date-picker"
    format="yyyy-MM-dd"
    placeholder="选择日期"
    type="date"
    v-bind="$attrs"
    v-on="$listeners"
    value-format="yyyy-MM-dd"
  ></el-date-picker>
</template>

<script>
export default {

  data() {
    return {

      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() <= Date.now();
        // },
        shortcuts: [
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "明天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "下周",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
          {
            text: "下月",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() + 3600 * 1000 * 24 * 30);
              picker.$emit("pick", date);
            },
          },
        ],
      },
    };
  },

};
</script>

<style lang="less" scoped>
.el-date-picker {
  width: 100%;
}
</style>
